/**
 * 借助map、connect 实现store的使用
 */

import { CSSProperties } from "react";
import { Button } from "antd";
import { useStoreSlice } from "@/hooks";

interface Props {
  className?: string;
  style?: CSSProperties;
  [key: string]: any;
}

export default ({ className = "", ...restProps }: Props) => {
  const { num, addNum, cutNum } = useStoreSlice("demo");
  return (
    <div className={`${className}`} {...restProps}>
      <h1 className="f-c-c mb-o">值：{num}</h1>
      <div className="mb-o line-1 f-c-c">
        {`const {(num, addNum, cutNum)} = useStoreSlice("demo");`}
      </div>
      <div className="f-c-c">
        <Button type="primary" className="mr-o" onClick={() => addNum(1)}>
          点击增加
        </Button>
        <Button type="primary" onClick={() => cutNum(1)} ghost>
          点击减少
        </Button>
      </div>
    </div>
  );
};
